<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 20px;">
      <el-badge :value="apply_count" class="item">
        <el-button @click="submitData(2)">待审核</el-button>
      </el-badge>
      <el-badge :value="over_count" class="item">
        <el-button @click="submitData(3)">认证会员</el-button>
      </el-badge>
      <el-badge :value="all_count" class="item" type="primary">
        <el-button @click="submitData(0)">会员总数</el-button>
      </el-badge>
    </el-card>

    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="单位名称">
          <el-input v-model="searchInfo.name" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="会员级别">
          <el-select v-model="searchInfo.applyStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>

        </el-form-item>
        <!--                <el-form-item label="密码">-->
        <!--                    <el-input placeholder="搜索条件" v-model="searchInfo.password"></el-input>-->
        <!--                </el-form-item>-->
        <el-form-item label="登陆手机号">
          <el-input v-model="searchInfo.phone" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="被委托人姓名">
          <el-input v-model="searchInfo.clientName" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="rt" type="primary">重置</el-button>
        </el-form-item>
        <!--                <el-form-item>-->
        <!--                    <el-button @click="openDialog" type="primary">新增users表</el-button>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item>-->
        <!--                    <el-popover placement="top" v-model="deleteVisible" width="160">-->
        <!--                        <p>确定要删除吗？</p>-->
        <!--                        <div style="text-align: right; margin: 0">-->
        <!--                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>-->
        <!--                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>-->
        <!--                        </div>-->
        <!--                        <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
        <!--                    </el-popover>-->
        <!--                </el-form-item>-->
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <!--            <el-table-column type="selection" width="55"></el-table-column>-->

      <el-table-column label="单位名称" prop="name" width="120" />
      <el-table-column label="被委托人姓名" prop="clientName" width="120" />
      <el-table-column label="会员级别" width="120">
        <template slot-scope="scope">
          <div v-for="item in options" v-if="item.ID == scope.row.applyStatus">
            {{ item.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="180">
        <template slot-scope="scope">{{ scope.row.CreatedAt|formatDate }}</template>
      </el-table-column>

      <!--            <el-table-column label="地区" prop="area" width="120"></el-table-column>-->

      <!--            <el-table-column label="证件地址" prop="cAddress" width="120"></el-table-column>-->

      <!--            <el-table-column label="联系所在地" prop="cArea" width="120"></el-table-column>-->

      <!--            <el-table-column label="组织机构代码" prop="cCard" width="120"></el-table-column>-->

      <!--            <el-table-column label="经营期限至" prop="cLength" width="120"></el-table-column>-->

      <!--            <el-table-column label="联系电话" prop="cPhone" width="120"></el-table-column>-->

      <!--            <el-table-column label="主营产品/业务" prop="cProduct" width="120"></el-table-column>-->

      <!--            <el-table-column label="传真号码，数组" prop="cSend" width="120"></el-table-column>-->

      <!--            <el-table-column label="街道地址" prop="cStreet" width="120"></el-table-column>-->

      <!--            <el-table-column label="单位性质" prop="cType" width="120"></el-table-column>-->

      <!--            <el-table-column label="企业网址" prop="cWeb" width="120"></el-table-column>-->

      <!--            <el-table-column label="主营行业" prop="cWork" width="120"></el-table-column>-->

      <!--            <el-table-column label="证件类型" prop="cardType" width="120"></el-table-column>-->

      <!--            <el-table-column label="被授权委托授权书" prop="clientBook" width="120"></el-table-column>-->

      <!--            <el-table-column label="委托人照片" prop="clientCard" width="120"></el-table-column>-->

      <!--            <el-table-column label="被委托人证件号码" prop="clientCardNumber" width="120"></el-table-column>-->

      <!--            <el-table-column label="被委托人应急手机号" prop="clientForPhone" width="120"></el-table-column>-->

      <!--            <el-table-column label="被委托人电子邮箱" prop="clientMail" width="120"></el-table-column>-->

      <!--            <el-table-column label="被委托人手机号" prop="clientPhone" width="120"></el-table-column>-->

      <!--            <el-table-column label="被委托人证件类型" prop="clientType" width="120"></el-table-column>-->

      <!--            <el-table-column label="处理人" prop="doneUser" width="120"></el-table-column>-->

      <!--            <el-table-column label="后台操作者审核上传图片" prop="dpayPic" width="120"></el-table-column>-->

      <!--            <el-table-column label="法人身份证照片" prop="legalCard" width="120"></el-table-column>-->

      <!--            <el-table-column label="营业执照" prop="license" width="120"></el-table-column>-->

      <!--            <el-table-column label="会员费缴费凭证" prop="mpayPic" width="120"></el-table-column>-->

      <!--            <el-table-column label="名称" prop="name" width="120"></el-table-column>-->

      <!--            <el-table-column label="密码" prop="password" width="120"></el-table-column>-->

      <!--            <el-table-column label="登陆手机号" prop="phone" width="120"></el-table-column>-->

      <!--            <el-table-column label="协议书" prop="protoAgree" width="120"></el-table-column>-->

      <el-table-column label="按钮组">
        <template slot-scope="scope">
          <el-button
            class="table-button"
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="user_detail(scope.row)"
          >变更
          </el-button>
          <el-button
            v-if="scope.row.applyStatus == 3"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="lockUser(scope.row,4)"
          >冻结
          </el-button>
          <el-button
            v-if="scope.row.applyStatus == 4"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="lockUser(scope.row,3)"
          >解冻
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :style="{float:'right',padding:'20px'}"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="会员状态:">
          <el-input v-model.number="formData.applyStatus" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="地区:">
          <el-input v-model="formData.area" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="证件地址:">
          <el-input v-model="formData.cAddress" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="联系所在地:">
          <el-input v-model="formData.cArea" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="组织机构代码:">
          <el-input v-model="formData.cCard" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="经营期限至:">
          <el-input v-model="formData.cLength" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="单位名称:">
          <el-input v-model="formData.cName" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="联系电话:">
          <el-input v-model="formData.cPhone" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="主营产品/业务:">
          <el-input v-model="formData.cProduct" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="传真号码，数组:">
          <el-input v-model="formData.cSend" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="街道地址:">
          <el-input v-model="formData.cStreet" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="单位性质:">
          <el-input v-model.number="formData.cType" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="企业网址:">
          <el-input v-model="formData.cWeb" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="主营行业:">
          <el-input v-model="formData.cWork" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="证件类型:">
          <el-input v-model="formData.cardType" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被授权委托授权书:">
          <el-input v-model="formData.clientBook" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="委托人照片:">
          <el-input v-model="formData.clientCard" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人证件号码:">
          <el-input v-model="formData.clientCardNumber" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人应急手机号:">
          <el-input v-model="formData.clientForPhone" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人电子邮箱:">
          <el-input v-model="formData.clientMail" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人姓名:">
          <el-input v-model="formData.clientName" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人手机号:">
          <el-input v-model="formData.clientPhone" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="被委托人证件类型:">
          <el-input v-model="formData.clientType" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="处理人:">
          <el-input v-model.number="formData.doneUser" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="后台操作者审核上传图片:">
          <el-input v-model="formData.dpayPic" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="法人身份证照片:">
          <el-input v-model="formData.legalCard" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="营业执照或律师执照:">
          <el-input v-model="formData.license" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="会员费缴费凭证:">
          <el-input v-model="formData.mpayPic" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="名称:">
          <el-input v-model="formData.name" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="密码:">
          <el-input v-model="formData.password" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="登陆手机号:">
          <el-input v-model="formData.phone" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="协议书:">
          <el-input v-model="formData.protoAgree" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="enterDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createUserLevel,
  deleteUserLevel,
  deleteUserLevelByIds,
  updateUserLevel,
  findUserLevel,
  getUserLevelList
} from '@/api/userLevel' //  此处请自行替换地址
import {
  createUsers,
  deleteUsers,
  deleteUsersByIds,
  updateUsers,
  findUsers,
  getUsersList
} from '@/api/users' //  此处请自行替换地址
import { formatTimeToStr } from '@/utils/date'
import infoList from '@/mixins/infoList'

export default {
  name: 'Users',
  filters: {
    formatDate: function(time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    formatBoolean: function(bool) {
      if (bool != null) {
        return bool ? '是' : '否'
      } else {
        return ''
      }
    }
  },
  mixins: [infoList],
  data() {
    return {
      options: [],
      listApi: getUsersList,
      dialogFormVisible: false,
      type: '',
      deleteVisible: false,
      multipleSelection: [], formData: {
        applyStatus: 0,
        area: '',
        cAddress: '',
        cArea: '',
        cCard: '',
        cLength: '',
        cName: '',
        cPhone: '',
        cProduct: '',
        cSend: '',
        cStreet: '',
        cType: 0,
        cWeb: '',
        cWork: '',
        cardType: '',
        clientBook: '',
        clientCard: '',
        clientCardNumber: '',
        clientForPhone: '',
        clientMail: '',
        clientName: '',
        clientPhone: '',
        clientType: '',
        doneUser: 0,
        dpayPic: '',
        legalCard: '',
        license: '',
        mpayPic: '',
        name: '',
        password: '',
        phone: '',
        protoAgree: ''

      }
    }
  },

  async created() {
    var options = await getUserLevelList()
    this.options = options['data']['list']
    console.log(this.options)
    await this.getTableData()
  },
  methods: {
    rt(){
      this.searchInfo = {}
      this.getTableData()
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm('确定要冻结吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUsers(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      this.multipleSelection &&
                this.multipleSelection.map(item => {
                  ids.push(item.ID)
                })
      const res = await deleteUsersByIds({ ids })
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length == ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateUsers(row) {
      const res = await findUsers({ ID: row.ID })
      this.type = 'update'
      if (res.code == 0) {
        this.formData = res.data.reusers
        this.dialogFormVisible = true
      }
    },
    async user_detail(row) {
      console.log(row)
      this.$router.push({
        name: 'user_detail',
        query: { 'id': row.ID }
      })
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        applyStatus: 0,
        area: '',
        cAddress: '',
        cArea: '',
        cCard: '',
        cLength: '',
        cName: '',
        cPhone: '',
        cProduct: '',
        cSend: '',
        cStreet: '',
        cType: 0,
        cWeb: '',
        cWork: '',
        cardType: '',
        clientBook: '',
        clientCard: '',
        clientCardNumber: '',
        clientForPhone: '',
        clientMail: '',
        clientName: '',
        clientPhone: '',
        clientType: '',
        doneUser: 0,
        dpayPic: '',
        legalCard: '',
        license: '',
        mpayPic: '',
        name: '',
        password: '',
        phone: '',
        protoAgree: ''

      }
    },
    async deleteUsers(row) {
      const res = await deleteUsers({ ID: row.ID })
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '冻结成功'
        })
        if (this.tableData.length == 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case 'create':
          res = await createUsers(this.formData)
          break
        case 'update':
          res = await updateUsers(this.formData)
          break
        default:
          res = await createUsers(this.formData)
          break
      }
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    async lockUser(row, applyStatus) {
      row.applyStatus = applyStatus
      var res = await updateUsers(row)
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '冻结成功'
        })
        this.getTableData()
      }
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    },
    async submitData(type) {
      if (type !== 0) {
        this.searchInfo.applyStatus = type
      }else{
        this.searchInfo.applyStatus  = undefined
      }
      await this.getTableData()
    }
  }
}
</script>

<style>
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>
